// 实现使用函数调用xtx-message组件的逻辑
import { createVNode, render } from 'vue'
import Messsage from './message.vue'

export function Message ({ type, text }) {
  // 生成虚拟DOM
  const messageVNode = createVNode(Messsage, { type, text })
  // 动态生成一个容器
  const divContainer = document.createElement('div')
  // 添加到容器中
  document.body.appendChild(divContainer)
  render(messageVNode, divContainer)

  // 优化
  // 1. 3s显示时间 - 一上来就显示
  // 2. 要给它隐藏掉 - 显示一定时间之后隐藏掉
  setTimeout(() => {
    render(null, divContainer)
  }, 1500)
}
